<template>
	<view class="container">
		<view class="warpper">
			<!-- <view class="order-status">{{order_data.order_state_desc}}</view> -->
			<address-item v-if="addressData" editColor="#EB658D" :showEdit="false" :addressInfo="addressData"></address-item>
			<view class="mail-item">
				<view class='mail-item-icon'>
					<image mode="aspectFill" src="/static/images/mail.png"></image>
				</view>
				<view class="main-input">
					<input
						type="email" 
						v-model="email" 
						placeholder="Type your email"
						placeholder-class="input-empty"
						maxlength="20"
						data-key="email"
						disabled
					/>
				</view>
			</view>
			<view class="time-item">
				<view class="item-title fsz14">Timeslot</view>
				<text class="timeslot-date">{{ order_data.timeslot }}</text>
			</view>
			<!-- 列表 -->
			<view class="cart-warpper" v-for="(item, index) in order_data.goods" :key="item.goods_id">
				<block>
					<view class="cart-item">
						<text class="tit">{{item.goods_name}}</text>
						<view class="cart-item-unite">
							<view class="item-price item-flex">
								<text class="item-goods-num mg-r10">{{item.goods_num}}</text> units
							</view>
							<view class="item-price mg-r10">
								<text class="red-price">${{item.goods_price}}</text>/ unite
							</view>
							<view v-if="parseFloat(item.goods_extra_price) > 0" class="item-price">
								,<text class="red-price">${{item.goods_extra_price}}</text>/ extra
							</view>
						</view>
						<!-- <view class="edit-item">
							<image mode="aspectFit" src="/static/images/delete.png" @click="delCart(item.id)"></image>
							<image mode="aspectFit" src="/static/images/edit-button.png" @click="editCart(item.id)"></image>
							<text>Notes</text>
							<uni-number-box 
								class="step"
								:min="1" 
								:max="100"
								:value="item.goods_num"
								@change="numberChange($event,index)"
							></uni-number-box>
						</view> -->
					</view>
				</block>
			</view>
			<view class="total-hr"/>
			<view class="total-tit">
				<text class="total-tit-title">Total</text>
				<text class="red-price">${{order_data.order_amount}}</text>
			</view>
			<view class="total-hr"/>
			<view class="order-info">
				<text class="order-item">Order Number: {{order_data.order_no}}</text>
				<text class="order-item">Creation Time: {{order_data.create_time}}</text>
				<text class="order-item">Payment Time: {{order_data.payment_time}}</text>
			</view>
		</view>
		<!-- 底部菜单栏 -->
		<view class="order-footer">
			<button class="operte-btn" v-show="order_data.order_state > 10 && order_data.order_state < 40">Completed</button>
			<button class="operte-btn" v-show="order_data.order_state < 10" @click="delOrder(order_data.id)">Delete</button>
			<button class="operte-btn" v-show="order_data.order_state > 10 && order_data.order_state < 40" @click="refundOrder(order_data)">Refund</button>
			<button class="operte-btn" @click="cancelOrder(order_data.id)" v-show="order_data.order_state === 10">Cancel</button>
			<button class="operte-btn" v-show="order_data.order_state === 10" @click="goPay(order_data.order_no)">payment</button>
		</view>
	</view>
</template>

<script>
	import listCell from '@/components/mix-list-cell';
	import addressItem from '@/components/mix-address-item.vue';
	export default {
		components: {
			listCell,
			addressItem
		},
		data() {
			return {
				isSelectTime: false,
				timeslotData: '',
				address_id: '',
				addressData: '',
				order_data: '',
				email: '',
				order_id: 0
			}
		},
		onLoad(options) {
			if(options.order_id) {
				this.order_id = options.order_id
			}
		},
		onShow() {
			this.loadData(true);
		},
		methods: {
			async loadData(flag) { //检测是否有默认地址
				let data = { 
					id: this.order_id
				}
				let _this = this
				this.$api.orderDetail(data, res => {
					if(res.code === 1) {
						_this.addressData = res.data.receiver_info;
						_this.order_data = res.data;
						_this.email = res.data.user_email;
						_this.setStyle(0, res.data.order_state_desc)
					} else {
						_this.$common.errorToShow(res.msg)
					}
				})
			},
			// 退货
			refundOrder(item) {
				this.$common.navigateTo('cancelOrder?order_id=' + item.id + '&order_no=' + item.order_no);
			},
			//取消订单
			cancelOrder(id) {
				let _this = this
				let data = {
					order_id: id
				}

				this.$common.modelShow('Tips', 'Are you sure you want to cancel the order', () => {
					_this.$api.orderRefund(data, res => {
						if (res.code === 1) {
							_this.$common.successToShow(res.msg, ress => {
								_this.loadData('reset');
							})
						} else {
							_this.$common.errorToShow(res.msg)
						}
					})
				})
			},
			// 删除订单
			delOrder(id) {
				let _this = this

				let data = {
					id: id
				}

				this.$common.modelShow('Tips', 'Are you sure you want to delete', () => {
					_this.$api.orderDel(data, res => {
						if (res.code === 1) {
							_this.$common.successToShow('Successfully Deleted', ress => {
								_this.loadData('reset');
							})
						} else {
							_this.$common.errorToShow(res.msg)
						}
					})
				})
			},
			goPay(id) { // 支付页面使用的是order_no参数，所以订单页面和订单详情页面传参现在都传order_no
				this.$common.navigateTo('../order/payment?order_no=' + id)
			},
			/**
			 * 修改导航栏buttons
			 * index[number] 修改的buttons 下标索引，最右边索引为0
			 * text[string] 需要修改的text 内容
			 */
			setStyle(index, text) {
				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				// if (text.length > 3) {
				// 	text = text.substr(0, 3) + '...';
				// }
				// #ifdef APP-PLUS
				let currentWebview = page.$getAppWebview();
				let titleNView = currentWebview.getStyle().titleNView;
				// 添加文字过长截取为3个字符，请根据自己业务需求更改
				titleNView.buttons[0].text = text;
				currentWebview.setStyle({
					titleNView: titleNView
				});
				// #endif
				// #ifdef H5
				// h5 临时方案
				document.getElementsByClassName('uni-btn-icon')[1].innerText = text;
				// #endif
			}
		}
	}
</script>

<style lang="scss">
.item-title {
	font-size: $font-lg + 4upx;
	font-weight: bold;
	margin: 48rpx 44rpx;
}
.warpper {
	.order-status {
		position: fixed;
		top: .5rem;
		right: .4rem;
		z-index: 10000;
		font-size: $font-base + 2upx;
	}
	margin-top: 20rpx;
	.total-hr {
		margin: 0 30rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.15);
	}
	.total-tit {
		margin: 20rpx 40rpx;
		display: flex;
		.total-tit-title {
			flex: 1;
			font-size: $font-base;
			line-height: 150%;
			font-weight: bold;
			color: #223263;
		}
	}
	.order-info {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin: 20rpx 40rpx;
		.order-item {
			font-size: 0.7rem;
			line-height: 1rem;
			color: #999;
		}
	}
	.add-address-btn {
		margin: 60rpx;
		background-color: #fff;
		border: 2rpx solid #2962FF;
		border-radius: 8rpx;
		box-sizing: border-box;
		font-family: Roboto;
		font-weight: bold;
		color: #2962FF;
		text-transform: uppercase;
		letter-spacing: 0.6rpx;
		text-align: center;
		.add-icon {
			margin-right: 30rpx;
		}
		&::after {
			border: none;
		}
	}
	.mail-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 32rpx;
		margin-bottom: 100rpx;
		.mail-item-icon {
			flex: 1;
			image {
				width: 1rem;
				height: 1rem;
			}
		}
		.main-input {
			flex: 9;
			border: 2rpx solid #D8D8D8;
			box-sizing: border-box;
			border-radius: 6rpx;
			padding: 18rpx 14rpx;
			margin-right: 20%;
		}
	}
	.time-item {
		color: #223263;
		letter-spacing: 1rpx;
		.time-select {
			margin-left: 20rpx;
		}
		.timeslot-date {
			margin-left: 44rpx;
			font-family: Poppins;
			font-weight: bold;
			font-size: $font-base;
			line-height: 150%;
			letter-spacing: 1rpx;
			color: #223263;
		}
	}
	.timeslot {
		padding: 60rpx;
		display: flex;
		flex-direction: column;
		.timeslot-title {
			font-family: Poppins;
			font-size: $font-sm;
			line-height: 180%;
			letter-spacing: 1rpx;
			color: #9098B1;
			margin-bottom: 30rpx;
		}
	}
	
	/* 购物车内容 */
	.cart-warpper {
		padding: 32rpx;
		.cart-item {
			display: flex;
			flex-direction: column;
			border: 2rpx solid #EBF0FF;
			box-sizing: border-box;
			border-radius: 10rpx;
			position:relative;
			padding:30upx 40upx;
			.tit {
				font-weight: bold;
				font-size: $font-base;
				line-height: 48rpx;
				color: #223263;
				margin-bottom: 16rpx;
			}
			.red-price {
				font-family: Poppins;
				font-weight: bold;
				font-size: $font-base;
				letter-spacing: 1rpx;
				line-height: 150%;
				color: #F64B15;
				margin-bottom: 12rpx;
			}
			.cart-item-num {
				font-family: Poppins;
				font-size: $font-base;
				margin-left: 20rpx;
			}
			.edit-item {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}
				text {
					font-size: $font-base;
					color: #82858F;
				}
				.step {
					position: absolute;
					right: 20rpx;
				}
			}
			.cart-item-unite {
				display: flex;
				flex-direction: row;
				justify-content:flex-start;
				align-items: center;
				.item-flex {
					flex: 1;
				}
				.item-price {
					color: #BCB9BA;
					font-size: $font-base;
					line-height: 150%;
					letter-spacing: 1rpx;
					.red-price {
						color: #F64B15;
						font-size: $font-lg;
						font-weight: bold;
					}
				}
			}
		}
	}
}
.order-footer {
	/* #ifdef H5 */
	margin-bottom: var(--window-bottom);
	/* #endif */
	position: fixed;
	bottom: 0;
	padding: 30rpx 26rpx 10rpx;
	width: 100%;
	background-color: #ffffff;
	border: 2rpx solid #EBF0FF;
	padding-top: 10rpx;
	.operte-btn {
		display: block;
		float: right;
		background: #4666D5;
		box-shadow: 0 20rpx 60rpx rgba(64, 191, 255, 0.24);
		border-radius: 10rpx;
		font-size: $font-sm;
		color: #FFFFFF;
		text-align: center;
		letter-spacing: 1rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}
	.total-tit {
		font-size: $font-base;
		line-height: 150%;
		font-weight: bold;
		color: #223263;
		text {
			margin-left: 26rpx;
		}
	}
}
</style>
